<template>
	<view class="container">
		<view class="content">
			<view class="searchm">
				<input class="search" placeholder="输入需要搜索的内容" placeholder-style="fonSize:50rpx" />
				<!-- #ifdef H5 -->
				<img class="rin" src="/static/zzm/搜索@3x.png" />

				<!-- #endif -->

				<!-- #ifdef MP-WEIXIN -->
				<image class="rin" src="/static/zzm/搜索@3x.png"></image>
				<!-- #endif -->
			</view>
			<view class="tab">
				<span>共3条</span>
				<picker @change="bindPickerChange" :value="index" :range="status">
					<view>{{ status[index] }}</view>
				</picker>
			</view>
			<view class="card">
				<view class="top">
					<span>订单号：65464946494</span>
					<span class="money">￥500</span>
				</view>
				<span class="item">下单用户：张三丰</span>
				<span class="item">预约时间：2023-03-10 11:00</span>
				<span class="item">服务项目：宝马啊实打实大大阿斯蒂芬</span>
				<view class="bottom">
					<span>下单时间：2022-10-12 11:00</span>
					<navigator class="details" url="/pages/orderDetails/orderDetails">查看详情</navigator>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
let index = ref(0);
let status = ref(['待服务', '已经服务']);
</script>

<style lang="scss" scoped>
.container {
	width: 100vw;
	height: 100vh;
	/* 使用线性渐变设置背景，前 50% 为蓝色，后 50% 为透明 */
	background-image: linear-gradient(to bottom, #3284fc 20%, #33ff5700 20%);
	display: flex;
	justify-content: center;
}
.content {
	width: 80%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	.tab {
		display: flex;
		justify-content: space-between;
		color: white;
		width: 100%;
		margin-top: 4%;
		font-size: 25rpx;
	}
	.card {
		border-radius: 30rpx;
		width: 100%;
		height: 20%;
		padding: 3% 3%;
		display: flex;
		background-color: white;
		flex-direction: column;
		align-items: flex-start;
		margin-top: 2%;
		.top {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 5rpx solid #a6a6a650;
			font-size: 30rpx;
			height: 20%;
			.money {
				color: red;
			}
		}
		.item {
			font-size: 25rpx;
			margin-top: 2%;
		}
		.bottom {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-top: 5rpx solid #a6a6a650;
			font-size: 30rpx;
			height: 20%;
			margin-top: 5%;
			.details {
				background-color: #0863e7;
				border-radius: 50rpx;
				width: 25%;
				height: 70%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 27rpx;
				color: white;
			}
		}
	}
}
.searchm {
	margin-top: 25%;
	height: 5%;
	width: 100%;
	background-color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50rpx;
}
.search {
	height: 100%;
	width: 85%;
}
.rin {
	height: 40%;
	width: 6%;
	margin-right: 6%;
}
</style>
